<template>
    <div class="big-screen-box">
        <el-button type="primary" class="back-btn" @click="$router.go(-1)" plain>返回</el-button>
        <el-row class="screen-header" justify="space-evenly" align="middle">
            <el-col :span="6">
                <div class="left-date-box">

                    <p class="date-p"> {{ currentTime }}</p>
                    <p class="week-p">{{ weekDay }}</p>
                </div>
            </el-col>
            <el-col :span="8">
                <h2 class="screenTitle">{{ screenTitle }}</h2>
                <!-- mqtt 测试 -->
                <!-- <mqtt /> -->
            </el-col>
            <el-col :span="6">
                <div class="right-date-box">
                    周期：
                    <el-button type="primary" plain>本月</el-button>
                    <el-button type="primary" plain>本周</el-button>
                    <el-button type="primary" plain>本日</el-button>

                </div>
            </el-col>
        </el-row>
        <div class="person-list-box">
            <div v-for="(item, index) in 22" :key="index" class="person-box">
                <div class="screen-border-style">
                    <h3 class="screen-title-box">主播名字</h3>
                    <div class="person-info-box">
                        <div class="left-avtar">
                            <img :src="defAva" />
                        </div>
                        <div class="right-info">
                            <div class="right-info-item">
                                <div class="info-content">
                                    <span class="info-title">销售额</span>
                                    <span class="info-value">5000000</span>
                                </div>
                                <div class="info-content">
                                    <span class="info-title">销售量</span>
                                    <span class="info-value">200000</span>
                                </div>
                                <div class="info-content">
                                    <span class="info-title">销售利润</span>
                                    <span class="info-value">600000</span>
                                </div>
                                <div class="info-content">
                                    <span class="info-title">利润率</span>
                                    <span class="info-value">11%</span>
                                </div>
                                <div class="info-content">
                                    <span class="info-title">退款金额</span>
                                    <span class="info-value">30000</span>
                                </div>
                                <div class="info-content">
                                    <span class="info-title">支付转换率</span>
                                    <span class="info-value">8.9%</span>
                                </div>
                                <div class="info-content">
                                    <span class="info-title">总观看人数</span>
                                    <span class="info-value">957435</span>
                                </div>

                            </div>
                            <div class="right-info-item1">
                                <div class="info-content ring_char_box">
                                    <ring_char_person :styleClass="{ height: '80px' }" :chartData="ring1Data"
                                        class="ring_char_box" />
                                </div>
                                <div class="info-content">
                                    <span class="info-title">目标值</span>
                                    <span class="info-value font-color-yellow">100w</span>
                                </div>

                                <div class="info-content">
                                    <span class="info-title">已达成</span>
                                    <span class="info-value">60w</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="User" lang="ts">
import { UserVO, UserQuery, UserForm } from '@/api/system/hmUser/types';
import { hmSupplierList, hmSupplierGet, hmSupplierPut } from '@/api/group/supplier/index'
import { SupplierTable } from '@/api/group/supplier/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { validateSpaceAndEmoji } from '@/utils/validate'

import defAva from '@/assets/images/person-avatar.png';
import ring_char_person from "./echarts/ring_char_person.vue";

const currentTime = ref(new Date().toLocaleTimeString());

const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

const updateTime = () => {
    currentTime.value = new Date().toLocaleTimeString();
};

// 今日周几
const weekDay = computed(() => {
    const dayNumber = new Date().getDay();
    return weekDays[dayNumber];
});

const ring1Data = reactive([
    {
        name: '未达成',
        value: 40,
        proportion: '40',
    },
    {
        name: '已达成',
        value: 60,
        proportion: '60',
    },
])


onMounted(() => {

    // getList();
})
updateTime();
const intervalId = setInterval(updateTime, 1000);
onUnmounted(() => clearInterval(intervalId));
const screenTitle = ref('惠麦销售数据统计大屏');

const liveData = ref('0985444');
const numData = ref('001234.4万');

const userList = ref<UserVO[]>([]);
// const userList = ref<UserVO[]>();
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const infoData: UserForm = reactive({})
const queryFormRef = ref<ElFormInstance>();
const userFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});

const initFormData: UserForm = {
    userId: undefined,
    deptId: undefined,
    userName: undefined,
    nickName: undefined,
    userType: undefined,
    email: undefined,
    phonenumber: undefined,
    sex: undefined,
    avatar: undefined,
    password: undefined,
    status: undefined,
    loginIp: undefined,
    loginDate: undefined,
    remark: undefined,
    supplier: undefined,
    contactName: undefined,
    gender: undefined,
    phone: undefined,
    wechat: undefined,
    department: undefined,
    position: undefined,
    counterpart: undefined,
    createdAt: undefined
}
const data = reactive<PageData<UserForm, UserQuery>>({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        userType: undefined,
        email: undefined,
        phonenumber: undefined,
        sex: undefined,
        avatar: undefined,
        password: undefined,
        status: undefined,
        loginIp: undefined,
        loginDate: undefined,
        supplier: undefined,
        contactName: undefined,
        gender: undefined,
        phone: undefined,
        wechat: undefined,
        department: undefined,
        position: undefined,
        counterpart: undefined,
        createdAt: undefined,
    },
    rules: {
        userId: [
            { required: true, message: "用户ID不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        deptId: [
            { required: true, message: "部门ID不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        userName: [
            { required: true, message: "用户账号不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        nickName: [
            { required: true, message: "用户昵称不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        userType: [
            { required: true, message: "用户类型不能为空", trigger: "change" }
        ],
        email: [
            { required: true, message: "用户邮箱不能为空", trigger: "blur" }
        ],
        phonenumber: [
            { required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        sex: [
            { required: true, message: "用户性别不能为空", trigger: "change" }, { validator: validateSpaceAndEmoji, }
        ],
        avatar: [
            { required: true, message: "头像地址不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        password: [
            { required: true, message: "密码不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        status: [
            { required: true, message: "帐号状态不能为空", trigger: "change" }
        ],
        loginIp: [
            { required: true, message: "最后登录IP不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        loginDate: [
            { required: true, message: "最后登录时间不能为空", trigger: "blur" }
        ],
        remark: [
            { required: true, message: "备注不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        supplier: [
            { required: true, message: "供应商名称不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        contactName: [
            { required: true, message: "联系人姓名不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        gender: [
            { required: true, message: "性别不能为空", trigger: "blur" }
        ],
        phone: [
            { required: true, message: "联系电话不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        wechat: [
            { required: true, message: "微信不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        department: [
            { required: true, message: "部门不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        position: [
            { required: true, message: "职位不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        counterpart: [
            { required: true, message: "对接人不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
        ],
        createdAt: [
            { required: true, message: "创建时间不能为空", trigger: "blur" }
        ]
    }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询用户信息列表 */
const getList = async () => {
    loading.value = true;
    const res = await hmSupplierList(queryParams.value);
    userList.value = res.rows;
    total.value = res.total;
    Object.assign(infoData, res.rows[0])
    loading.value = false;
}



onMounted(() => {
    getList();
});
</script>

<style lang="scss" scoped>
:deep(.el-select) {
    width: 100% !important;
}

.mb40 {
    margin-bottom: 40px;
}

.mt17 {
    margin-top: 17px;
}

.font-color-yellow {
    color: #FFDF72 !important;
}

.h473 {
    height: 473px !important;
}

.h_auto100 {
    height: calc(100% - 10px) !important;
}

.h_auto473 {
    height: calc(100% - 473px) !important;
}

.big-screen-box {
    position: relative;
    background: url("@/assets/images/screen/icon_beijing.png");
    // background: #ccc;
    background-size: cover;
    color: #66FFFF;
    // height: 100%;
    width: 100%;
    padding: 0 7px;
    box-sizing: border-box;
    overflow: hidden;

    .el-table--fit {
        background: none;
    }

    .screen-header {
        height: 130px;
        background: url("@/assets/images/screen/icon_toubu@2x.png");
        background-size: 100% 100%;

        .left-date-box {
            background: url("@/assets/images/screen/icon_riqi@2x.png") 100% no-repeat;
            background-size: 100% 100%;
            height: 78px;
            max-width: 308px;
            margin: 0 auto;
            position: relative;
            top: 24px;

            p {
                margin: 0;
                line-height: 34px;
            }

            .date-p {
                font-size: 16px;
                text-indent: 2em;
            }

            .week-p {
                font-size: 12px;
                text-align: right;
                margin-right: 2em;
            }
        }



        .right-date-box {
            height: 60px;
            max-width: 406px;
            background: url("@/assets/images/screen/icon_zhouqi@2x.png") 100% no-repeat;
            background-size: 100% 100%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            padding-left: 14px;
            font-size: 14px;
            position: relative;
            top: 24px;

            .el-button--primary.is-plain {
                border: 1px solid #66FFFF;
                color: #66FFFF;
                background: none;
            }
        }

        .screenTitle {
            // width: 600px;
            text-align: center;
            height: 40px;
            font-family: AlibabaSansKR, AlibabaSansKR;
            font-weight: bold;
            font-size: 40px;
            color: #FFFFFF;
            line-height: 2px;
            letter-spacing: 3px;
            font-style: normal;
        }


    }

    .screen-border-style {
        width: 100%;
        border: 2px solid #1D74F1;
        border-radius: 0px 0px 10px 10px;
        position: relative;
        overflow: hidden;
    }

    .screen-border-style::before {
        content: " ";
        width: 6px;
        height: 15px;
        background: #0E5FFF;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

    .screen-border-style::after {
        content: " ";
        width: 6px;
        height: 15px;
        background: #0E5FFF;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;

    }

    .screen-title-box {
        background: url("@/assets/images/screen/icon_wenzikuang@2x.png") 100% no-repeat;
        background-size: 100% 100%;
        width: 162px;
        height: 32px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        line-height: 32px;
        margin: 0 auto;
        position: relative;
        top: -1px
    }

    .back-btn {
        // border: 1px solid #66FFFF;
        width: 80px;
        height: 30px;
        color: #66FFFF;
        background: none;
        background: #0935B7;
        border: 1px solid #0E5DFB;
        // font-weight: bold;
        font-size: 16px;
        line-height: 16px;
        border-radius: 0;
        position: fixed;
        top: 70px;
        left: 40px;
        z-index: 100;
    }
}

// 人员列表
.person-list-box {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 40px;

    .person-box {
        width: 25%;
        box-sizing: border-box;
        padding-right: 20px;
        padding-bottom: 20px;

        .person-info-box {
            display: flex;

            .left-avtar {
                width: 30%;
                padding: 10px 10px 0px;

                img {
                    display: blcok;
                    width: 100%;
                    border-radius: 10px;
                    border: 1px solid rgb(1, 147, 255);

                }
            }

            .right-info {
                padding: 10px 10px 0px;
                flex: 1;

                .right-info-item {
                    // width: 152px;
                    // height: 55px;
                    background: url("@/assets/images/screen/icon_renshukuang@2x.png") 100% no-repeat;
                    background-size: 100% 100%;
                    padding: 6px 12px;
                    box-sizing: border-box;
                    // margin-bottom: 12px;
                    display: flex;
                    flex-wrap: wrap;

                    .info-content {
                        width: 50%;
                        display: flex;
                        padding-top: 6px;
                        margin-bottom: 6px;

                        &>span {
                            width: 50%;
                            display: block;
                            height: 16px;
                        }

                        .info-title {
                            font-weight: 500;
                            font-size: 12px;
                            color: #FFFFFF !important;
                            line-height: 16px;
                            text-align: right;

                            &::after {
                                content: '：';
                            }
                        }

                        .info-value {
                            font-size: 16px;
                            color: #19ECFF !important;
                            line-height: 16px;
                            text-align: left;
                            font-weight: bold;
                        }
                    }

                }

                .right-info-item1 {
                    display: flex;
                    align-items: center;

                    .ring_char_box {
                        width: 100px;
                    }

                    .info-content {
                        flex: 1;

                        .info-title {
                            font-weight: 400;
                            font-size: 14px;
                            color: #FFFFFF;
                            line-height: 14px;

                            &::after {
                                content: '：';
                            }
                        }


                        .info-value {
                            font-size: 18px;
                            color: #19ECFF;
                            line-height: 18px;
                            text-align: left;
                            font-weight: bold;
                        }

                        .font-color-yellow {
                            color: #FFDF72 !important;
                        }

                    }

                }


            }
        }


    }
}
</style>